<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('认证数据分布')" />
</head>
<body class="gray-bg">
     <div class="container-div">
<!--        <div class="row">-->
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li>
                                <label>日期：</label>
                                <input type="text" name="dateInfo" id="dateInfo" autocomplete="off"/>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="loadProvinceData();"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

            <div class="col-sm-12 select-table ibox">
                <div class="ibox-title">
                    <label>总认证数：<span id="totalNumber" style="color: red"></span>；</label>
                    <label>查询时间：<span id="queryDateInfo" style="color: red"></span>；</label>
                    <input type="hidden" id="startDate" />
                    <input type="hidden" id="endDate" />
                    <label>注意：点击省份可查看该省份具体的城市分布数据</label>
                </div>
                <div class="ibox-content height-full">
                    <div class="echarts height-full" id="echarts-map-chart"></div>
                </div>
            </div>
<!--        </div>-->
    </div>
    <th:block th:include="include :: footer" />
     <th:block th:include="include :: echarts-js" />
    <script th:inline="javascript">
        var prefix = ctx + "member/extInfo";

        layui.use('laydate', function(){
            var laydate = layui.laydate;
            laydate.render({
                elem: '#dateInfo',
                type: 'date',
                range: '~',
                max: 0
            });
        });

        $(function() {
            loadProvinceData();
        });

        var mapChart = echarts.init(document.getElementById("echarts-map-chart"));
        var mapoption = {
            title : {
                text: '认证数据省份分布图',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: function (params) {
                    return params.name + ' : ' + params.data.number + ' | ' + params.data.percent + '%';
                }
            },
            legend: {
                orient: 'vertical',
                x:'left',
                // data:['iphone3','iphone4','iphone5']
                data:['认证']
            },
            toolbox: {
                show: true,
                orient : 'vertical',
                x: 'right',
                y: 'center',
                feature : {
                    // mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    // restore : {show: true},
                    // saveAsImage : {show: true}
                }
            },
            roamController: {
                show: true,
                x: 'right',
                mapTypeControl: {
                    'china': true
                }
            },
            // label: function (params) {
            //     return params.value + '1'
            // }
        };
        mapChart.on("click", function (params) {
            loadCityInfo(params.data);
        });


        function loadProvinceData(){
            var dateInfo = $("#dateInfo").val();
            var url = prefix + '/chartMapProvinceData'
            $.ajax({
                type: "post",
                url: url,
                data: {
                    "dateInfo": dateInfo
                },
                success: function(result) {
                    $.modal.msgSuccess("加载完成");

                    if (result.code == 0) {

                        mapoption.dataRange= {
                                min: 0,
                                max: result.data.maxValue,
                                x: 'left',
                                y: 'center',
                                text:['高','低'],           // 文本，默认为数值文本
                                calculable : true
                        },

                        mapoption.series = [
                            {
                                name: '认证',
                                type: 'map',
                                mapType: 'china',
                                roam: false,
                                itemStyle:{
                                    normal:{label:{show:true}},
                                    emphasis:{label:{show:true}}
                                },
                                data: result.data.dataList
                            },
                        ]

                        $("#startDate").val(result.data.startDate)
                        $("#endDate").val(result.data.endDate)
                        $("#queryDateInfo").text(result.data.queryDateInfo)
                        $("#totalNumber").text(result.data.totalNumber)

                        mapChart.setOption(mapoption);
                        $(window).resize(mapChart.resize);

                    }
                }
            });


        }

        function loadCityInfo(paramsData){

            var startDate = $("#startDate").val()
            var endDate = $("#endDate").val()

            var url = prefix + '/chartMapCity?startDate=' + startDate +"&endDate=" + endDate + '&provinceCode=' + paramsData.code;
            $.modal.open('城市数据图', url);

        }


    </script>
</body>
</html>